<?php /*a:3:{s:60:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\shops\index.html";i:1747733331;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header.html";i:1747733208;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\style.html";i:1747733208;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>


<style scoped>
    .custom-collapse {
        margin-left: -4px;
        width: 344px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    
    .collapse-header {
      padding: 12px 15px;
      cursor: pointer;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .collapse-content {
      padding: 15px;
    }
    
    .el-icon-arrow-down {
      transition: transform 0.3s;
    }
    
    .el-icon-arrow-down.is-reverse {
      transform: rotate(180deg);
    }
    </style>

<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">       
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>店铺列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card >
                <div style="display: flex;align-items: center;justify-content: flex-start;">
                    <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                        <el-form-item label="店铺昵称">                     
                           <el-input v-model="searchForm.name" placeholder="请输入店铺的昵称" filterable clearable></el-input>
                        </el-form-item>         
       
                        <!-- <el-form-item label="供应商代号">                     
                            <el-input v-model="searchForm.code" placeholder="请输入店铺的代号" filterable clearable></el-input>
                         </el-form-item>   -->
                        <el-form-item label="店铺状态">
                            <el-select v-model="searchForm.status" placeholder="请选择店铺状态" filterable clearable>
                                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>                       
    
                        <el-form-item>
                            <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                        </el-form-item>          
                      </el-form>
                    
                    <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                            <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >添加店铺</el-button>       
                    </div>
                </div>  
                
                
                <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border >
                    <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                    <el-table-column   prop="name" label="店铺昵称" > </el-table-column>  
                    <el-table-column   prop="platform" label="所属平台" ></el-table-column>   
                    <el-table-column   prop="username" label="店铺负责人" ></el-table-column>   
                    
                    <el-table-column   prop="status"  label="店铺状态" width="150"> 
                        <template slot-scope="scope">
                            <el-switch style="display: block" v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" :inactive-value='0' :active-value='1' active-text='正常' inactive-text="删除" @change="handleSwitchChange(scope.row)">
                            </el-switch>
                        </template>                
                    </el-table-column>
                    <el-table-column   prop="createtime" label="添加时间" width="180"> </el-table-column>  

                    <el-table-column  fixed="right" label="操作" width="180">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain  icon="el-icon-edit"  @click="editor(row)" >编辑 </el-button>
                                  
                        </template>
                    </el-table-column>
                </el-table>    
                <!-- page -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>  
            </el-card>


              <!-- 修改编辑弹窗 -->
            <el-dialog :title="title" :visible.sync="isshopVisible " width="600px" :close-on-click-modal="false">
                <el-form :inline="true" :model="createForm" size="mini"  :rules="isshopules"  ref="refsearchForm"  :popper-append-to-body="false"  >             

                    <el-form-item prop="name" label="店铺名字:">
                        <el-input v-model="createForm.name" placeholder="请输入店铺名字" style="width: 330px;" clearable></el-input>
                    </el-form-item>
                    
                    <el-form-item  label="所属平台:">
                          <el-select v-model="createForm.platform" placeholder="请选择所属平台" style="width: 330px;margin-left: 8px;" clearable>
                              <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value">
                              </el-option>
                          </el-select>
                    </el-form-item> 
                <div>      
                    <el-form-item  label="店铺状态:">                                  
                        <el-radio-group v-model="createForm.status"  style="margin-left: 10px;">         
                            <template>            
                            <el-radio :label="1"  >正常</el-radio>   
                            <el-radio :label="0"  >关闭</el-radio>                     
                        </template>
                        </el-radio-group>                
                    </el-form-item> 
                </div>
                <div>
                    <el-form-item  label="店铺详情:">                
                        <div class="custom-collapse">
                            <div 
                            class="collapse-header" @click="isCollapsed = !isCollapsed" >
                            <span>店铺详情</span>
                            <i :class="['el-icon-arrow-down', {'is-reverse': !isCollapsed}]"></i>
                            </div>
                            
                            <el-collapse-transition>
                                <div class="collapse-content" v-show="!isCollapsed">
                                        <el-form-item  label="店铺负责人" style="margin-top: 20px;">
                                            <el-input v-model="createForm.username" placeholder="请输入店铺负责人" style="width: 220px;" clearable></el-input>
                                        </el-form-item> 
                                        <el-form-item  label="店铺电话">
                                            <el-input v-model="createForm.tel" placeholder="请输入店铺电话" style="width: 220px;margin-left: 13px;" clearable></el-input>
                                        </el-form-item> 
                                        <el-form-item  label="店铺地址">
                                            <el-input v-model="createForm.address" placeholder="请输入店铺地址" style="width: 220px;margin-left: 13px;" clearable></el-input>
                                        </el-form-item> 
                                </div>
                            </el-collapse-transition>
                        </div>
                    </el-form-item> 
                    </template>
                </div>    

                <div>                                   
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>
                </div>
                </el-form>
            </el-dialog>   
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {       
                    isCollapsed : true,   //控制店铺详情折叠  
                    title:'',           
                    isshopVisible:false,//控制配置弹窗
                    status:[
                        {
                            value: 2,
                            label: '删除'
                        },
                        {
                            value: 1,
                            label: '正常'
                        }
                    ],
                    // 状态是否正常      
                
                    total:0,   //分页总页数      
                    tablelist:[] ,              
                    searchForm: {                              
                        name: '',
                        username: '',
                        address:'',             
                        platform: '',                        
                        status: '',         
                        pagesize: 20,
                        pagenum: 1,
                        
                    },   
                    editForm: {
                        id:'',
                        status: '',
                    },
                    platform:[], 
                    createForm:{
                        status:'',          
                        name:'',  
                        address:'',             
                        platform: '',  
                        tel:'',    
                        username: '',               
                    },
                    isshopules: {
                        name: [
                            { required: true, message: '请输入店铺名称', trigger: 'blur' },
                        ],             
                    }
                }
            },
            mounted(){        
                this.getSearch()
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post('/admin/shops/index', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list
                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },              
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },        
                //编辑
                editor(row){         
                    this.title = '编辑店铺'
                    this.isshopVisible = true
                    this.isCollapsed =false;
                    this.createForm=JSON.parse(JSON.stringify(row));                   
                },
                //添加权限
                create(){
                    this.title = '添加店铺'
                    this.isshopVisible = true
                    this.createForm.id = ''
                    this.createForm.status = 1         
                    this.createForm.name = ''        
                    this.createForm.tel = ''      
                    this.createForm.username = ''      
                    this.createForm.address = ''        
                    this.createForm.platform = ''        
                },      
                //确认提交修改
                async checkSubmits(){
                    this.$refs.refsearchForm.validate(async valid => {
                        if (!valid) return;
                        let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                            });
                        axios.post('/admin/shops/create', {params: this.createForm}).then(res => {
                            loading.close()
                            if (res.status !== 1) {
                                return this.$message.error(res.info);                  
                            }
                        
                            this.$message.success('操作成功');
                            this.isshopVisible= false
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    })
                },  
                //修改是否是菜单
                handleSwitchChange(row) {
                    this.editForm.id = row.id
                    this.editForm.status = row.status  

                    this.$confirm('确认需要修改店铺状态？', '提示', {
                            confirmButtonText: '确定修改',
                            cancelButtonText: '取消修改',
                            closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                            type: 'warning'
                        }).then(() => {
                            let loading = this.$loading({
                                lock: true,
                                text: '店铺状态处理中···',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            axios.post('/admin/shops/update_status', {params: this.editForm}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);             
                                }                    
                                this.$message.success('修改成功');
                                this.getDatalist()
                            }).catch(err => {
                                console.log(err)
                            })   
                            
                        }).catch(() => {
                            this.getDatalist()
                            this.$message.info('已取消修改');
                        });
                },
                //    
                //关闭弹窗
                close(){
                    this.isshopVisible=false  
                },             
                
                
            }
        })
    </script>
 </body> 
</html>
